<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container"></div>
		<script src="" type="/template" id="templateStr">
			<ul>
				{{#arr}}
				<li>姓名{{name}}</li>
				<li>年龄{{age}}</li>
				<li>
					{{name}}爱好是
					<ol>
						{{#hobbies}}
						<li>
							{{hobbies}}
						</li>
						{{/hobbies}}
					</ol>
				</li>
				{{/arr}}
			</ul>
		</script>
		<script src="../jslib/mustache.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var templateStr = document.getElementById("templateStr").innerText
			var data = {
				arr: [{
						'name': '小明',
						'age': 12,
						'hobbies': ['游泳', '羽毛球']
					},
					{
						'name': '小红',
						'age': 11,
						'hobbies': ['编程', '写作文', '看报纸']
					},
					{
						'name': '小强',
						'age': 13,
						'hobbies': ['打台球']
					},
				]
			}
			var domStr = Mustache.render(templateStr, data)
			
			//获取节点上树
			var container = document.getElementById("container")
			container.innerHTML = domStr
		</script>
	</body>
</html>
